<template>
  <a-card 
    title="求职意向" 
    :bordered="true" 
    :body-style="{ padding: '20px' }"
  >
    <draggable 
      v-model="jobIntentionItems" 
      tag="div"
      item-key="id"
      :group="{ name: 'intention', pull: 'clone', put: false }"
      :sort="true"
      @start="onDragStart" 
      @end="onDragEnd"
    >
      <template #item="{ element }">
        <div :key="element.id" style="margin-bottom: 16px;">
          <component 
            :is="element.component" 
            v-model:value="element.value" 
            :label="element.label"
            @update="updateItemValue"
            :item-id="element.id"
          />
        </div>
      </template>
    </draggable>
  </a-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import draggable from 'vuedraggable'
import PositionItem from './PositionItem.vue'
import SalaryItem from './SalaryItem.vue'
import StartDateItem from './StartDateItem.vue'

// 定义求职意向项
const jobIntentionItems = ref([
  { id: 'position', label: '推荐岗位', value: '', component: PositionItem },
  { id: 'salary', label: '期望薪资', value: '', component: SalaryItem },
  { id: 'startDate', label: '到岗时间', value: '', component: StartDateItem }
])

// 判断是否有内容显示
const hasContent = computed(() => {
  return jobIntentionItems.value.some(item => item.value !== '')
})

// 更新项的值
const updateItemValue = (id: string, value: string) => {
  const item = jobIntentionItems.value.find(item => item.id === id)
  if (item) {
    item.value = value
  }
}

// 拖拽事件处理
const onDragStart = (event: any) => {
  console.log('JobIntention drag start', event)
}

const onDragEnd = (event: any) => {
  console.log('JobIntention drag end', event)
}

// 定义暴露给父组件的属性和方法
defineExpose({
  items: jobIntentionItems
})
</script>